<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0" /> -->
    <title>电影网站</title>
    <!-- 重置样式文件 -->
    <link rel="stylesheet" href="./css/reset.css" />
    <link rel="stylesheet" href="./css/bootstrap.min.css" />
    <!-- 变量文件 -->
    <link rel="stylesheet" href="./css/variable.css" />
    <!-- main style -->
    <link rel="stylesheet" href="./css/main.css" />
    <link rel="stylesheet" href="./css/global.css" />
    <script src="./js/vue.global.js"></script>
  </head>
  <body>
    <div id="app">
      <header-com></header-com>

      <main class="main">
        <!-- 轮播图组件 -->
        <banner-com style="margin-bottom: 20px"></banner-com>

        <card-com
          style="margin-top: 20px"
          v-for="item in typeData"
          :key="item.id"
        >
          <template #left>
            <div class="movie-left card-left">
              <card-head :src="item.titleIcon">{{item.title}}</card-head>
              <!-- 视频列表 -->
              <video-list :list="item.items"></video-list>
              <!-- 咨询列表 -->
              <consult-com :list="item.cons"></consult-com>
            </div>
          </template>
          <template #right>
            <div class="movie-right card-right">
              <card-head :src="item.hotIcon">{{item.hotTitle}}</card-head>
              <top-list :list="item.hots"></top-list>
            </div>
          </template>
        </card-com>

        <div class="sumUp">
          <div class="sum-item">
            <card-head src="./assets/top.png">电影排行榜</card-head>
            <top-list :list="information.data1"></top-list>
          </div>
          <div class="sum-item">
            <card-head src="./assets/top.png">电视剧排行榜</card-head>
            <top-list :list="information.data2"></top-list>
          </div>
          <div class="sum-item">
            <card-head src="./assets/top.png">动漫排行榜</card-head>
            <top-list :list="information.data3"></top-list>
          </div>
          <div class="sum-item">
            <card-head src="./assets/top.png">综艺排行榜</card-head>
            <top-list :list="information.data4"></top-list>
          </div>
        </div>
      </main>
      <footer
        style="text-align: center; padding: 10px; font-size: 14px; color: #666"
      >
        <p style="margin: 0">
          这里都是免费的电影、电视剧、综艺、动漫、 当然他们并不能观看
          因为没有数据
        </p>
        <div>什么都没有哇 什么都没有哇 看看就好啦</div>
        <p>
          <span>这里没什么说的 只是展位的</span>
          <span>All Rights Reserved.</span>
        </p>
        <p>已经到底啦~~~</p>
      </footer>
    </div>
    <script>
      // 声明组件空间
      // 存储vue组件
      window.VueComponents = {};
      // 全局数据引用
      window.APIDATA = {};
    </script>

    <!-- 引入全局库 -->
    <script src="./js/lib.js"></script>
    <!-- 获取数据方法 -->
    <script src="./data/index.js"></script>
    <!-- 总的数据 -->
    <script src="./api/index.js"></script>
    <script src="./data/type.js"></script>
    <!-- 引入组件文件 -->
    <script src="./component/Header.js"></script>
    <script src="./component/Footer.js"></script>
    <script src="./component/Banner.js"></script>
    <script src="./component/Card.js"></script>
    <script src="./component/VideoList.js"></script>
    <script src="./component/TopList.js"></script>
    <script src="./component/Consult.js"></script>

    <!-- 主运行文件 -->
    <script src="./js/main.js"></script>
  </body>
</html>
